<!--   -->
<template>
  <div id="Info">
    <div class="Info-block">
      <template v-for="(item, index) in data">
        <div class="Info-box"
             :key="index">
          <p class="Info-title">{{item.title}}</p>
          <p class="Info-time">{{item.create_time}}</p>
          <span @click="cancel_collect(item.rid)">取消收藏</span>
          <span><a :href="url+item.rid"
               target="_blank">查看详情>></a></span>
        </div>
      </template>
    </div>

    <!-- 翻页按钮 -->
    <div class="Info-btn">
      <button @click="next_page(-1)">上一页</button>
      <button @click="next_page(1)">下一页</button>
    </div>
  </div>
</template>

<script>
import baseUrl from '../../../api/setBaseUrl.js'
export default {
  inject: ['reload'],
  name: 'Info',
  data () {
    return {
      data: '',
      // 打开网页地址
      url: baseUrl + '/index/newsDetail/id/',
      // 分页
      pages: 1,
      backStatus: false
    }
  },

  components: {},

  computed: {},

  mounted () {
    // this.$http.newsList({
    //   phone: localStorage.getItem('mobile')
    // }).then((res) => {
    //   console.log(res)
    //   this.data = res.data.data.data
    // }).catch((err) => {
    //   console.log(err)
    // })
    this.req_newsList(this.pages)
  },

  methods: {
    // 取消收藏
    cancel_collect (id) {
      console.log(id)
      this.$http.newsEdit({
        phone: localStorage.getItem('mobile'),
        id: id,
        status: 2
      }).then((res) => {
        console.log(res)
        this.$message({
          message: '取消收藏成功',
          type: 'success'
        })
        this.reload()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 收藏列表的方法
    req_newsList (page) {
      if (page > 0) {
        this.$http.newsList({
          phone: localStorage.getItem('mobile'),
          listRows: 20,
          page: page
        }).then((res) => {
          console.log(res)
          this.data = res.data.data.data
          if (res.data.data.data.length < 20) {
            this.backStatus = true
          }
        }).catch((err) => {
          this.pages = 1
          console.log(err)
        })
      } else {
        this.pages = 1
        this.$message({
          message: '已经翻到顶部',
          type: 'warning'
        })
      }
    },
    //
    /* req_data (page) {
      if (page > 0) {
        this.$http.active({
          phone: localStorage.getItem('mobile'),
          listRows: 12,
          page: page
        }).then((res) => {
          let data = res.data.data.data
          for (let item of data) {
            // 改变类型
            switch (item.type) {
              case 1:
                item.type = '永久'
                break
              case 2:
                item.type = '1年'
                break
            }
            // 改变激活时间
            item.create_time = util.formatDate(item.create_time * 1000)
            // 改变到期时间
            if (item.end_time) {
              item.end_time = util.formatDate(item.end_time * 1000)
            }
          }
          this.tableData = data
          if (data.length < 12) {
            this.backStatus = true
          }
        }).catch((err) => {
          console.log(err)
        })
      } else {
        this.pages = 1
        this.$message({
          message: '已经翻到顶部',
          type: 'warning'
        })
      }
    }, */
    // 翻页
    next_page (num) {
      console.log(num)
      if (this.backStatus) {
        if (num > 0) {
          this.$message({
            message: '已经翻完了',
            type: 'warning'
          })
        } else {
          this.backStatus = false
          this.pages = this.pages + num
          this.req_newsList(this.pages)
        }
      } else {
        this.pages = this.pages + num
        console.log()
        this.req_newsList(this.pages)
      }
    }
  }
}

</script>
<style lang='less' scoped>
#Info {
  padding: 20px 54px;
  // height: 100%;
  height: calc(100% - 40px);
  background: white;
  .Info-block {
    height: calc(100% - 80px);
    .Info-box {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      display: flex;
      align-items: center;
      p {
        display: inline-block;
        color: #333;
      }
      span {
        display: inline-block;
        width: 15%;
        color: #1073d0;
        cursor: pointer;
        a {
          color: #1073d0;
          text-decoration: none;
        }
      }
      .Info-title {
        width: 40%;
        text-align: left;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
      .Info-time {
        width: 30%;
      }
    }
  }

  .Info-btn {
    border-top: 1px solid #d9d9d9;
    height: 80px;
    text-align: right;
    line-height: 80px;
    button {
      background: rgba(238, 238, 238, 1);
      border-radius: 10px;
      border: none;
      padding: 8px 20px;
      color: #333;
      margin-left: 40px;
      line-height: 20px;
    }
    button:hover {
      background: rgb(165, 165, 165);
      color: white;
    }
  }
}
</style>
